<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min-4.3.1.css">
<link rel="stylesheet" href="css/bootstrap-table1.15.3.css">
<body style="background-color: snow">
    <div class="container" style="margin-top: 20px;">
        <div class="row">
            <div class="col-md-1 col-lg-2">
                <input  type="text" class="form-control" placeholder="请输入查询的名字" name="empname" id="empname">
            </div>
            <div class="col-md-2 col-lg-2">
                <select class="form-control" id="sex">
                    <option value="0">不限性别</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <div class="col-md-3 col-lg-2" id="star" name="star">
                <input type="date" class="form-control">
            </div>
            <div class="col-md-3 col-lg-2" id="stop" name="stop">
                <input type="date" class="form-control">
            </div>
            <div class="col-md-2 col-lg-2">
                <select class="form-control" id="deptno" name="deptno">
                    <option value="0">不限部门</option>
                    <option value="1">生产部</option>
                    <option value="2">销售部</option>
                </select>
            </div>
            <div class="col-md-1 col-lg-2">
                <button type="button" class="btn btn-primary" onclick="cx()" >查询</button>
            </div>
        </div>
    </div>

    <div class="container-fluid" style="margin-top: 30px">
        <div style="float: right;">
<!--            onclick=add("添加")-->
            <button type="button" class="btn btn-primary btn-sm" id="addmodal"  >添加员工</button>
        </div>
        <table id="tableInfo" >

        </table>
    </div>

<!--    模态框-->
    <div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
<!--                模态框头部-->
                <div class="modal-header">
                    <h4 class="modal-title">修改员工</h4>
                    <button class="close" data-dismiss="modal">×</button>
                </div>
<!--                模态框主体-->
                <div class="modal-body">
                    <form id="form">
                        <input type="hidden" name="empno" id="empno">
                        <div class="form-group">
                            <label>姓名:</label>
                            <input type="text" class="form-control"name="ename" id="ename">
                        </div>
                        <div class="form-group">
                            <label>工作类型:</label>
                            <input type="text" class="form-control" name="job" id="job">
                        </div>
                        <div class="form-group">
                            <label>入职时间:</label>
                            <input type="date" class="form-control" name="hiredate" id="hiredate">
                        </div>
                        <div class="form-group">
                            <label>薪水:</label>
                            <input type="text" class="form-control" name="sal" id="sal">
                        </div>
                        <div class="form-group">
                            <label>所属部门:</label>
                            <select class="form-control" name="dno" id="dno">
                                <option value="0">请选择部门</option>
                            </select>
                        </div>
                        <div class="form-group" style="text-align: center">
                            <button class="btn btn-primary" data-dismiss="modal" id="qd">确定</button>
                            <button class="btn btn-primary" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-min-4.3.1.js"></script>
<script src="js/bootstrap-table1.15.3.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/infotable.js"></script>
<script>
    // function cx(){
    //     var empname=document.getElementById("empname").value;
    //     var star=document.getElementById("star").value;
    //     var stop=document.getElementById("stop").value;
    //     var deptno=document.getElementById("deptno").value;
    //     $.ajax({
    //         url:"emp?ename="+empname+"&star="+star+"&stop="+stop+"&deptno="+deptno
    //         type:"get",
    //         dataType:"json",
    //         contentType:"application/json;charset=utf-8",
    //         cache:false,
    //         //如果成功
    //         success:function (data) {
    //         },
    //     })
    // }

    $("#qd").click(function () {
        var empno=$("#empno").val();
        var ename=$("#ename").val();
        var job=$("#job").val();
        var hiredate=$("#hiredate").val();
        var sal=$("#sal").val();
        var dno=$("#dno").val();
        //添加
        if(empno==""){
            $.ajax({
                url:"addEmp?ename="+ename+"&job="+job+"&hiredate="+hiredate+"&sal="+sal+"&deptno="+dno,
                type:"get",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                cache:false,
                //如果成功
                success:function (data) {
                    if(data=1){
                        $("#tableInfo").bootstrapTable("refresh");
                    }
                },
                //如果失败
                error:function (error) {
                    console.log("请求失败"+error)
                }
            })
        }else{
            $.ajax({
                url:"updEmp?empno="+empno+"&ename="+ename+"&job="+job+"&hiredate="+hiredate+"&sal="+sal+"&deptno="+dno,
                type:"get",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                cache:false,
                //如果成功
                success:function (data) {
                    if(data=1){
                        $("#tableInfo").bootstrapTable("refresh");
                    }
                },
                //如果失败
                error:function (error) {
                    console.log("请求失败"+error)
                }
            })
        }
    })
    // 添加模态框
    $("#addmodal").click(function () {
        //reset()重置
        document.getElementById("form").reset();
        document.getElementById("dno").value=0;
        //弹出模态框
        $("#modal").modal("show");
        $(".modal-header h4").html("添加员工");
    })
    //修改模态框
    function queryById(id) {
        //重置表单
        $("#form input[type='reset']").click();
        $.ajax({
            url:"queryById?empno="+id,
            type:"get",
            dataType:"json",
            contentType:"application/json;charset=utf-8",
            cache:false,
            //如果成功
            success:function (data) {
                //弹出模态框
                $("#modal").modal("show");
                $(".modal-body").find("input").eq(0).val(data.empno);
                $(".modal-body").find("input").eq(1).val(data.ename);
                $(".modal-body").find("input").eq(2).val(data.job);
                $(".modal-body").find("input").eq(3).val(data.hiredate.substr(0,10));
                $(".modal-body").find("input").eq(4).val(data.sal);
                document.getElementById("dno").value=data.deptno;
                //遍历部门赋值
                for(var i=0;i<$("#dno option").length;i++){
                    if($("#dno option").eq(i).val()==data.deptno){
                        $("#dno option").eq(i).attr("selected","selected");
                    }
                }
            },
            //如果失败
            error:function (error) {
                console.log("请求失败"+error)
            }
        })
        // $(".modal-header h4").html("修改员工");
    }
    //删除
    function del(id) {
        var conf=confirm("您确定要删除吗")
        if(conf){
            $.ajax({
                url:"delEmp?empno="+id,
                type:"get",
                dataType:"json",
                contentType:"application/json;charset=utf-8",
                cache:false,
                //如果成功
                success:function (data) {
                    if(data>0){
                        $("#tableInfo").bootstrapTable("refresh");
                    }
                },
                //如果失败
                error:function (error) {
                    console.log("请求失败"+error)
                }
            })
        }

    }

</script>
</html>